<template>
  <view class="points-display-container">
    <view class="points-info">
      <text class="points-icon">💎</text>
      <view class="points-details">
        <text class="points-title">{{ title || '我的积分' }}</text>
        <text class="points-value">{{ userPoints }}</text>
      </view>
    </view>
    
    <view class="level-info" v-if="showLevel">
      <text class="level-text">Lv.{{ userLevel }}</text>
      <view class="level-progress">
        <view class="progress-bar" :style="{ width: levelProgress + '%' }"></view>
      </view>
      <text class="level-desc">{{ levelProgress }}% 到下一级</text>
    </view>
    
    <!-- 按钮区域 -->
    <view class="button-group">
      <!-- 历史记录按钮 -->
      <view class="history-button" @click="showHistory">
        <text class="history-icon">📊</text>
        <text class="history-text">积分记录</text>
      </view>
      
      <!-- 金币兑换积分按钮 -->
      <view class="exchange-button" @click="showExchangeModal">
        <text class="exchange-icon">💰</text>
        <text class="exchange-text">金币兑换</text>
        <text class="exchange-rate">(10:1)</text>
      </view>
    </view>
    
    <!-- 兑换模态框 -->
    <view class="exchange-modal" v-if="showModal">
      <view class="modal-overlay" @click="closeModal"></view>
      <view class="modal-content">
        <view class="modal-header">
          <text class="modal-title">金币兑换积分</text>
          <text class="modal-close" @click.stop="closeModal">×</text>
        </view>
        <view class="modal-body">
          <view class="gold-info">
            <text class="gold-icon">💰</text>
            <text class="gold-text">当前金币：{{ userGold }}</text>
          </view>
          <view class="exchange-rate-info">
            <text>兑换比例：10金币 = 1积分</text>
          </view>
          <view class="input-section">
            <text class="input-label">兑换数量</text>
            <view class="input-group">
              <button class="quantity-btn" @click="decreaseQuantity" :disabled="exchangeQuantity <= 1">-</button>
              <input class="quantity-input" type="number" v-model.number="exchangeQuantity" min="1" :max="maxExchangeQuantity" @input="validateQuantity" />
              <button class="quantity-btn" @click="increaseQuantity" :disabled="exchangeQuantity >= maxExchangeQuantity">+</button>
            </view>
          </view>
          <view class="exchange-preview">
            <text>将消耗：{{ exchangeQuantity * 10 }} 金币</text>
            <text>将获得：{{ exchangeQuantity }} 积分</text>
          </view>
          <button class="confirm-button" @click="confirmExchange" :disabled="!canExchange">确认兑换</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import pointsManager from '@/utils/points-manager.js'
import goldManager from '@/utils/gold-manager.js'
import toastHelper from '@/utils/toast-helper.js'

export default {
  name: 'PointsDisplay',
  props: {
    title: {
      type: String,
      default: '我的积分'
    },
    showLevel: {
      type: Boolean,
      default: true
    },
    autoRefresh: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      userPoints: 0,
      userLevel: 1,
      levelProgress: 0,
      userGold: 0,
      showModal: false,
      exchangeQuantity: 1
    }
  },
  
  computed: {
    // 最大可兑换数量
    maxExchangeQuantity() {
      return Math.floor(this.userGold / 10) || 1
    },
    
    // 是否可以兑换
    canExchange() {
      return this.exchangeQuantity >= 1 && this.exchangeQuantity <= this.maxExchangeQuantity
    }
  },
  
  mounted() {
    this.loadPointsData()
    this.loadGoldData()
  },
  
  onShow() {
    if (this.autoRefresh) {
      this.loadPointsData()
      this.loadGoldData()
    }
  },
  
  methods: {
    loadPointsData() {
      const pointsData = pointsManager.getPointsData()
      if (pointsData) {
        this.userPoints = pointsData.points || 0
        this.userLevel = pointsData.level || 1
        this.levelProgress = pointsData.levelProgress || 0
      }
    },
    
    // 加载金币数据
    loadGoldData() {
      this.userGold = goldManager.getCurrentGold()
    },
    
    // 刷新积分数据
    refresh() {
      this.loadPointsData()
      this.loadGoldData()
    },
    
    // 显示历史记录
    showHistory() {
      this.$emit('showHistory')
    },
    
    // 显示兑换模态框
    showExchangeModal() {
      // 检查是否登录
      const token = uni.getStorageSync('user_token')
      if (!token) {
        toastHelper.showError('请先登录后再兑换')
        return
      }
      
      this.loadGoldData()
      this.exchangeQuantity = 1
      this.showModal = true
    },
    
    // 关闭模态框
    closeModal() {
      this.showModal = false
    },
    
    // 减少兑换数量
    decreaseQuantity() {
      if (this.exchangeQuantity > 1) {
        this.exchangeQuantity--
      }
    },
    
    // 增加兑换数量
    increaseQuantity() {
      if (this.exchangeQuantity < this.maxExchangeQuantity) {
        this.exchangeQuantity++
      }
    },
    
    // 验证输入的数量
    validateQuantity() {
      if (isNaN(this.exchangeQuantity) || this.exchangeQuantity < 1) {
        this.exchangeQuantity = 1
      } else if (this.exchangeQuantity > this.maxExchangeQuantity) {
        this.exchangeQuantity = this.maxExchangeQuantity
      } else {
        this.exchangeQuantity = Math.floor(this.exchangeQuantity)
      }
    },
    
    // 确认兑换
    confirmExchange() {
      if (!this.canExchange) {
        return
      }
      
      const goldCost = this.exchangeQuantity * 10
      
      // 检查金币是否足够
      if (!goldManager.hasEnoughGold(goldCost)) {
        toastHelper.showError('金币不足')
        return
      }
      
      // 消费金币
      if (!goldManager.spendGold(goldCost, `兑换${this.exchangeQuantity}积分`)) {
        toastHelper.showError('金币扣除失败')
        return
      }
      
      // 添加积分
      if (pointsManager.addPoints(this.exchangeQuantity, `金币兑换（消耗${goldCost}金币）`)) {
        toastHelper.showSuccess(`兑换成功，获得${this.exchangeQuantity}积分`)
        // 刷新数据
        this.loadPointsData()
        this.loadGoldData()
        this.closeModal()
        // 触发刷新事件
        this.$emit('pointsUpdated')
      } else {
        // 回滚金币
        goldManager.addGold(goldCost, '兑换积分失败回滚')
        toastHelper.showError('积分添加失败')
      }
    }
  }
}
</script>

<style scoped>
.points-display-container {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.points-info {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.points-icon {
  font-size: 48rpx;
  margin-right: 20rpx;
}

.points-details {
  flex: 1;
}

.points-title {
  font-size: 24rpx;
  color: #666;
  display: block;
  margin-bottom: 8rpx;
}

.points-value {
  font-size: 40rpx;
  font-weight: bold;
  color: #333;
}

.level-info {
  text-align: center;
}

.level-text {
  font-size: 28rpx;
  font-weight: bold;
  color: #667eea;
  display: block;
  margin-bottom: 12rpx;
}

.level-progress {
  background: #f0f0f0;
  height: 10rpx;
  border-radius: 5rpx;
  overflow: hidden;
  margin-bottom: 8rpx;
}

.progress-bar {
  background: linear-gradient(90deg, #667eea, #764ba2);
  height: 100%;
  transition: width 0.3s ease;
}

.level-desc {
  font-size: 20rpx;
  color: #999;
}

/* 按钮组 */
.button-group {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
  margin-top: 20rpx;
}

/* 历史记录按钮 */
.history-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16rpx 24rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12rpx;
  cursor: pointer;
  transition: all 0.3s ease;
}

.history-button:active {
  transform: scale(0.95);
}

.history-icon {
  font-size: 24rpx;
  margin-right: 8rpx;
}

.history-text {
  font-size: 24rpx;
  color: white;
  font-weight: bold;
}

/* 兑换按钮 */
.exchange-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16rpx 24rpx;
  background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
  border-radius: 12rpx;
  cursor: pointer;
  transition: all 0.3s ease;
}

.exchange-button:active {
  transform: scale(0.95);
}

.exchange-icon {
  font-size: 24rpx;
  margin-right: 8rpx;
}

.exchange-text {
  font-size: 24rpx;
  color: #333;
  font-weight: bold;
  flex: 1;
  text-align: center;
}

.exchange-rate {
  font-size: 20rpx;
  color: #666;
}

/* 模态框样式 */
.exchange-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

.modal-content {
  position: relative;
  width: 85%;
  max-width: 600rpx;
  background: white;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 20rpx 40rpx rgba(0, 0, 0, 0.3);
  z-index: 1001;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx;
  background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
  color: #333;
}

.modal-title {
  font-size: 32rpx;
  font-weight: bold;
}

.modal-close {
  font-size: 36rpx;
  cursor: pointer;
  padding: 10rpx;
}

.modal-body {
  padding: 30rpx;
}

.gold-info {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24rpx;
}

.gold-icon {
  font-size: 36rpx;
  margin-right: 12rpx;
}

.gold-text {
  font-size: 28rpx;
  font-weight: bold;
  color: #ff6b00;
}

.exchange-rate-info {
  text-align: center;
  margin-bottom: 30rpx;
  font-size: 26rpx;
  color: #666;
}

.input-section {
  margin-bottom: 24rpx;
}

.input-label {
  display: block;
  font-size: 26rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 12rpx;
}

.input-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20rpx;
}

.quantity-btn {
  width: 60rpx;
  height: 60rpx;
  border: 1rpx solid #ddd;
  background: white;
  border-radius: 8rpx;
  font-size: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.quantity-btn:disabled {
  opacity: 0.5;
}

.quantity-input {
  width: 120rpx;
  height: 60rpx;
  border: 1rpx solid #ddd;
  border-radius: 8rpx;
  text-align: center;
  font-size: 28rpx;
}

.exchange-preview {
  background: #f8f9fa;
  padding: 20rpx;
  border-radius: 12rpx;
  margin-bottom: 30rpx;
}

.exchange-preview text {
  display: block;
  text-align: center;
  font-size: 24rpx;
  color: #666;
  margin-bottom: 8rpx;
}

.exchange-preview text:last-child {
  color: #ff6b00;
  font-weight: bold;
  margin-bottom: 0;
}

.confirm-button {
  width: 100%;
  padding: 20rpx;
  background: linear-gradient(135deg, #ff6b00, #ff9500);
  color: white;
  border: none;
  border-radius: 12rpx;
  font-size: 28rpx;
  font-weight: bold;
}

.confirm-button:disabled {
  background: #ccc;
  opacity: 0.7;
}
</style>
